<template>
  <div class="top">
    <div class="title">个人笔记整理</div>
    <div class="butt">
      <el-collapse>
        <el-collapse-item title="WEB学习笔记" name="2">
          <div>
            对web知识的整理与,归纳 涉及HTML CSS JavaScript JQuery Ajax ES6
            Vue全家桶等技术的个人总结
            <el-link
              href="https://www.wolai.com/9hd6csoUsfKsurbNwkKGSM"
              type="success"
              >前往查看<i class="el-icon-position"></i
            ></el-link>
          </div>
        </el-collapse-item>
        <el-collapse-item title="Git常用指令整理" name="3">
          <div>
            在git中比较常使用的部分命令
            <el-link
              href="https://www.wolai.com/oNZPn76K5fM4z8bFTBQqK1"
              type="success"
              >前往查看<i class="el-icon-position"></i
            ></el-link>
          </div>
        </el-collapse-item>
        <el-collapse-item title="解决方案" name="4">
          <div>
            在编写代码中个人遇见的BUG解决办法(html css JavaScript vue)
            <el-link
              href="https://www.wolai.com/kC47FybmKF8h1FrCrP6k5C"
              type="success"
              >前往查看<i class="el-icon-position"></i
            ></el-link>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@font-face {
  font-family: fontbobo;
  src: url(@/font/BOBOHEI-2.otf);
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 7px;
}
.title {
  color: #4c8045;
  font-size: 20px;
  border-bottom: 1px solid #000;
  font-family: 'fontbobo';
  margin-bottom: 10px;
}
.butt {
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
}
/deep/.el-collapse-item__header,
/deep/.el-collapse-item__wrap {
  background-color: #ffffffc2;
  margin-left: 20px;
}
</style>
